<template>
  <Modal
      width="950"
      v-model="visible"
      :title="title"
      :key="key"
  >
    <Spin size="large" fix v-if="Loading"></Spin>
    <Form ref="model" :model="model" :rules="ruleValidate" inline :label-width="180" :disabled=disableSubmit>
      <Row v-if=isSendedHd>
        <i-col span="24">
          <Alert type="error"><span style="color:#F00;">当前家庭已申请家庭经济状况核查，不允许编辑姓名、与申请人关系、证件号码、
                            户籍类别、与申请人关系、民族、婚姻状况、文化程度、健康状况、劳动能力丧失情况、身份证或户口簿等信息。</span>
          </Alert>
        </i-col>
      </Row>
      <Row>
        <i-col span="12">
          <FormItem label="义务人" prop="ssbc0035">
            <c-dict-select v-model="model.ssbc0035" dicType="service" :width="200"
                           :dictService="url.getAssistanceMemberList"
                           :serviceParam="serviceParam" :disabled="isSendedHd||townshipEdit"/>
          </FormItem>
        </i-col>
        <i-col span="12">
          <FormItem label="义务人家庭成员证件号码" prop="ssbc0004">
            <Input v-model="model.ssbc0004" placeholder="请输入义务人家庭成员证件号码" class="itemStyle"
                   @on-blur="checkIdcard()"
                   :disabled="isSendedHd||townshipEdit"/>
          </FormItem>

        </i-col>
      </Row>
      <Row>
        <i-col span="12">
          <FormItem label="义务人家庭成员姓名" prop="ssbc0002">
            <Input v-model="model.ssbc0002" placeholder="请输入义务人家庭成员姓名" class="itemStyle"
                   :disabled="isSendedHd||townshipEdit"
                   maxlength="30"/>
          </FormItem>
        </i-col>
        <i-col span="12">
          <FormItem label="是否参与家庭经济核对" prop="ssbc0040">
            <c-dict-select v-model="model.ssbc0040" dictCode="yesorno" :width="200"/>
          </FormItem>
        </i-col>
      </Row>
      <Row>
        <i-col span="12">
          <FormItem label="与申请人关系" prop="ssbc0033">
            <c-dict-select v-model="model.ssbc0033" dictCode="familyrelationship" hiddenKeys="01"
                           :disabled="isSendedHd"/>
          </FormItem>
        </i-col>
        <i-col span="12">
          <FormItem label="是否有赡抚扶养能力" prop="ssbc0018">
            <c-dict-select v-model="model.ssbc0018" dictCode="yesorno" :disabled="true"/>
          </FormItem>
        </i-col>
      </Row>
      <Row>
        <i-col span="12">
          <FormItem label="婚姻状况" prop="ssbc0023">
            <c-dict-select v-model="model.ssbc0023" dictCode="maritalstatus" :disabled="isSendedHd"/>
          </FormItem>
        </i-col>
        <i-col span="12">
          <FormItem label="民族" prop="ssbc0022">
            <c-dict-select v-model="model.ssbc0022" dictCode="nation" :disabled="isSendedHd"/>
          </FormItem>
        </i-col>
      </Row>
      <Row>
        <i-col span="12">
          <FormItem label="健康状况" prop="ssbc0025">
            <c-dict-select v-model="model.ssbc0025" dictCode="health" :disabled="isSendedHd"/>
          </FormItem>
        </i-col>
        <i-col span="12">
          <FormItem label="户籍类别" prop="ssbc0024">
            <c-dict-select v-model="model.ssbc0024" dictCode="registertype" :disabled="isSendedHd"/>
          </FormItem>
        </i-col>
      </Row>
      <Row>
        <i-col span="12">
          <FormItem label="劳动能力丧失情况" prop="ssbc0026">
            <c-dict-select v-model="model.ssbc0026" dictCode="workability" :disabled="isSendedHd"/>
          </FormItem>
        </i-col>
        <i-col span="12">
          <FormItem label="月收入" prop="ssbc0007">
            <InputNumber :min="0"
                         v-model="model.ssbc0007" placeholder="请输入月收入" class="itemStyle"></InputNumber>
          </FormItem>
        </i-col>
      </Row>
      <Row>
        <i-col span="12">
          <FormItem label="工作单位电话" prop="ssbc0020">
            <Input v-model="model.ssbc0020" placeholder="请输入工作单位电话" class="itemStyle"
                   maxlength="30"/>
          </FormItem>
        </i-col>
        <i-col span="12">
          <FormItem label="联系电话" prop="ssbc0005">
            <Input v-model="model.ssbc0005" placeholder="请输入联系电话" class="itemStyle" maxlength="30"/>
          </FormItem>
        </i-col>
      </Row>
      <Row>
        <i-col span="24">
          <FormItem label="工作单位" prop="ssbc0019">
            <Input v-model="model.ssbc0019" placeholder="请输入工作单位" maxlength="100"
                   style="width: 660px"/>
          </FormItem>
        </i-col>
      </Row>
      <Row>
        <i-col span="15">
          <FormItem label="户籍地址" prop="azcp0596">
            <Ss01003Tag :bindshengjiData.sync="model.azcp0595"
                        :bindshijiData.sync="model.azcp0596"
                        :shengji_value="model.azcp0595"
                        :shiji_value="model.azcp0596"
                        :shengji_disabled="hujiquhuaDisabled"
                        :shiji_disabled="hujiquhuaDisabled" style="width: 350px">
            </Ss01003Tag>
          </FormItem>
        </i-col>
        <i-col span="3">
          <Button type="primary" @click="checkHuJi" style="margin-left:20px" :loading="hujiLoading">户籍验证
          </Button>
        </i-col>
      </Row>
      <Row>
        <i-col>
          <FormItem label="户籍地址详细信息" prop="ssbc0021">
            <Input v-model="model.ssbc0021" placeholder="请填写户籍地址详细信息" style="width: 660px"
                   maxlength="300" :disabled="ssbc0021Disabled"/>
          </FormItem>
        </i-col>
      </Row>
      <Row v-if="model.ssbc0040=='1'">
        <i-col span="24">
          <FormItem label="证件上传类型">
            <RadioGroup v-model="model.ssbc0031" type="button">
              <Radio label="0">身份证正反面照片上传</Radio>
              <Radio label="1" v-if="householdRegisterVisible">户口簿个人页照片上传</Radio>
            </RadioGroup>
          </FormItem>
        </i-col>
      </Row>
      <Row v-if="model.ssbc0031=='0'&&model.ssbc0040=='1'">
        <i-col span="12">
          <FormItem label="" prop="ssbc0027" :label-width="50">
            <Upload action="" :accept="acceptImg" :disabled="isSendedHd"
                    :before-upload="(file) => beforeUpload(file,'ssbc0027')">
              <Row class="imgBackColor">
                <i-col span="20" class="idCard">
                  <img :src="model.ssbc0027">
                </i-col>
                <i-col span="4" class="positiveTDiv">正面上传</i-col>
              </Row>
            </Upload>
          </FormItem>
        </i-col>
        <i-col span="12">
          <FormItem prop="ssbc0028" :label-width="0">
            <Upload action="" :accept="acceptImg" :disabled="isSendedHd"
                    :before-upload="(file) => beforeUpload(file,'ssbc0028')">
              <Row class="imgBackColor">
                <i-col span="20" class="idCard">
                  <img :src="model.ssbc0028">
                </i-col>
                <i-col span="4" class="positiveTDiv">反面上传</i-col>
              </Row>
            </Upload>
          </FormItem>
        </i-col>
      </Row>
      <Row v-if="model.ssbc0031=='1'&&model.ssbc0040=='1'">
        <i-col span="12">
          <FormItem label="" prop="ssbc0032" :label-width="50">
            <Upload action="" :accept="acceptImg" :disabled="isSendedHd"
                    :before-upload="(file) => beforeUpload(file,'ssbc0032')">
              <Row class="imgBackColor">
                <i-col span="20" class="idCard">
                  <img :src="model.ssbc0032">
                </i-col>
                <i-col span="4" class="positiveTDiv">户口簿上传</i-col>
              </Row>
            </Upload>
          </FormItem>
        </i-col>
      </Row>
    </Form>
    <div slot="footer">
      <Button @click="cancel">取消</Button>
      <template v-if="!disableSubmit">
        <Button type="primary" @click="ok">确定</Button>
      </template>
    </div>
  </Modal>
</template>

<script>
import ICol from "view-design/src/components/grid/col";
import {getAction, postAction} from '@/api/request';
import Ss01003Tag from '@/components/system/ss01003-select'// 户籍区划功能
import {IdentityCodeValid, getAgeByIdcardByHD} from '@/plugins/idcardValid.js'
import pic_sfz_z from '@/assets/images/sfz_z.jpg'
import pic_sfz_f from '@/assets/images/sfz_f.jpg'
import hkb from '@/assets/images/hkb.jpg'
import {CommonMixin} from '@/views/common/js/CommonMixin'

const ssbc0027Img = pic_sfz_z;
const ssbc0028Img = pic_sfz_f;
const ssbc0032Img = hkb;

export default {
  components: {ICol, Ss01003Tag},
  name: "ss11005-modal1",
  mixins: [CommonMixin],
  data() {
    const validatessbc0007 = (rule, value, callback) => {
      if ((!this.model.ssbc0007 && this.model.ssbc0007 != 0) && rule.required) {
        callback(new Error('请输入月收入'));
      } else {
        callback();
      }
    };
    return {
      ssbc0021Disabled: false,
      serviceParam: {
        azcp0500: this.$parent.queryParam.azcp0500,
      },
      isSendedHd: this.$parent.familyInfo.isSendedHd,
      townshipEdit: this.$parent.familyInfo.townshipEdit,//未发送经济核查，乡镇街道初审，不能更改人员证件号、姓名
      visible: false,
      disableSubmit: false,
      hujiLoading: false,
      key: "",
      title: "",
      Loading: false,
      model: {},
      fieldsToValidate: ["ssbc0002", "ssbc0040", "ssbc0004", "ssbc0035", "ssbc0033", "ssbc0018", "ssbc0022", "ssbc0023", "ssbc0024",
        "ssbc0025", "ssbc0026", "ssbc0007", "ssbc0005", "ssbc0021", "azcp0596"],
      ruleValidate: {
        ssbc0002: [],
        ssbc0004: [],
        ssbc0035: [],
        ssbc0033: [],
        ssbc0018: [],
        ssbc0022: [],
        ssbc0023: [],
        ssbc0024: [],
        ssbc0025: [],
        ssbc0026: [],
        ssbc0007: [],
        ssbc0005: [],
        ssbc0021: [],
        azcp0596: [],
      },
      rule: {
        ssbc0002: [
          {required: true, message: '请输入义务人家庭成员姓名', trigger: 'blur'}
        ],
        ssbc0004: [
          {required: true, message: '请输入义务人家庭成员证件号码', trigger: 'blur'}
        ],
        ssbc0035: [
          {required: true, message: '请选择义务人', trigger: 'change'}
        ],
        ssbc0033: [
          {required: true, message: '请选择与申请人关系', trigger: 'change'}
        ],
        ssbc0018: [
          {required: true, message: '请选择是否有赡抚扶养能力', trigger: 'change'}
        ],
        ssbc0022: [
          {required: true, message: '请选择民族', trigger: 'change'}
        ],
        ssbc0023: [
          {required: true, message: '请选择婚姻状况', trigger: 'change'}
        ],
        ssbc0024: [
          {required: true, message: '请选择户籍类别', trigger: 'change'}
        ],
        ssbc0025: [
          {required: true, message: '请选择健康状况', trigger: 'change'}
        ],
        ssbc0026: [
          {required: true, message: '请选择劳动能力丧失情况', trigger: 'change'}
        ],
        ssbc0040: [
          {required: true, message: '请选择是否发送核对申请', trigger: 'blur'}
        ],
        ssbc0007: [
          {
            required: true,
            message: '请输入月收入',
            trigger: 'blur',
            type: 'number',
            validator: validatessbc0007
          },
        ],
        ssbc0005: [
          {required: true, message: '请输入联系电话', trigger: 'blur'},
          {pattern: /^[0-9]{5,20}$/, message: '请填写正确的联系电话', trigger: 'blur'}
        ],
        ssbc0021: [
          {required: true, message: '请输入户籍地址详细信息', trigger: 'blur'}
        ],
        azcp0596: [
          {required: true, message: '请选择户籍地址', trigger: 'change',},

        ],
      },
      url: {
        update: '',
        insert: '',
        getAssistanceMemberList: '',
        check: '',
      },
      loadFinish: false,
      shengQuHua: '', //户籍区划功能
      shiQuHua: '', //户籍区划功能
      hujiquhuaDisabled: false, //户籍区划功能
      householdRegisterVisible: false
    }
  },
  props: {
    type: {
      type: Number,
      default: 11
    },
  },
  methods: {
    cancel() {
      this.visible = false;
    },
    ok() {
      var that = this;
      let validate = true;
      let err_msg = [];
      this.setRequired2(that.fieldsToValidate);
      for (let item of that.fieldsToValidate) {
        that.$refs['model'].validateField(item, (error) => {
          if (error) {
            validate = false;
            err_msg.push(error)
          }
        })
      }
      if (validate) {
        if (this.model.ssbc0031 == '0' && model.ssbc0040 == '1' && (this.model.ssbc0027 == ssbc0027Img || this.model.ssbc0028 == ssbc0028Img)) {
          this.$Message.error('请上传身份证照片！');
        } else if (this.model.ssbc0031 == '1' && model.ssbc0040 == '1' && this.model.ssbc0032 == ssbc0032Img) {
          this.$Message.error('请上传户口簿照片！');
        } else if (!this.model.azcp0596) {
          this.$Message.error('请选择户籍地址！');
        } else {
          this.submitFrom();
        }
      } else {
        this.$Message.error(err_msg[0]);
        return
      }
    },
    submitFrom() {
      var that = this;
      that.Loading = true;
      var url = this.url.insert;
      if (that.model.id) {
        url = this.url.update;
      }
      postAction(url, that.model).then((res) => {
        if (res.data.errcode != 0) {
          this.$Message.error(res.data.errmsg);
        } else {
          that.$Message.success("保存完成！");
          this.$emit('ok');
          this.visible = false;
        }
      }).finally(() => {
        that.Loading = false;
      });
    }
    ,
    add() {
      this.edit({});
    }
    ,
    edit(row) {
      this.url.update = "/api/ac/subsistence/ss" + this.type + "005Service/updateData";
      this.url.insert = "/api/ac/subsistence/ss" + this.type + "005Service/insertData";
      this.url.getAssistanceMemberList = "/api/ac/subsistence/ss" + this.type + "005Service/getAssistanceMemberList";
      this.url.check = "/api/ac/subsistence/ss" + this.type + "005Service/checkMember";
      this.loadFinish = true;
      row.azcp0500 = this.$parent.queryParam.azcp0500;
      this.model = Object.assign({}, row);
      this.model.ssbc0018 = '1';
      this.shengShiQuHua(this.model.ssbc0034);
      if (!this.model.ssbc0027) {
        this.model.ssbc0027 = ssbc0027Img;
      }
      if (!this.model.ssbc0028) {
        this.model.ssbc0028 = ssbc0028Img;
      }
      if (!this.model.ssbc0032) {
        this.model.ssbc0032 = ssbc0032Img;
      }
      if (!this.model.ssbc0031) {
        this.$set(this.model, 'ssbc0031', '0');
        this.householdRegisterVisible = false;
      }
      if (!this.model.ssbc0007 && this.model.ssbc0007 != 0) {
        this.model.ssbc0007 = null
      }

      this.setRequired2(this.fieldsToValidate);
      this.visible = true;
    }
    ,
    checkHuJi() {
      let that = this;
      if (!that.model.ssbc0002) {
        that.$Message.error("请输入姓名");
        return false;
      }
      if (!that.model.ssbc0004) {
        that.$Message.error("请输入身份证号");
        return false;
      }
      //请求参数
      var dataParam = {
        azcp0001: that.model.ssbc0004,
        azcp0003: that.model.ssbc0002,
      };
      that.hujiLoading = true
      postAction('/api/ac/subsistence/ss00011Service/checkHuJi', dataParam).then((res) => {
        if (res.data.data.msg == 'success') {
          if (res.data.data.local == 'true') {
            this.$set(this.model, "ssbc0034", "1");
            that.shengShiQuHua('1')
            this.$set(this.model, "ssbc0021", res.data.data.address);
            that.$Message.success("户籍验证成功")
          } else {
            this.$set(this.model, "ssbc0034", "0");
            this.$set(this.model, "ssbc0021", "");
            that.shengShiQuHua('0');
            that.$Message.success("户籍验证成功, 此人为非本市户籍, 请选择户籍地址")
          }
        } else {
          that.$Message.error("户籍验证失败");
        }
      }).finally(() => {
        that.hujiLoading = false
      });
    }
    ,
    shengShiQuHua(e) {
      this.hujiquhuaDisabled = true;
      if (e == '1') { //本地户籍的, 区划 not editable
        this.ssbc0021Disabled = false;
        this.model.azcp0595 = '210000000000';
        this.model.azcp0596 = '210100000000';
      } else if (e == '0') { //外地户籍的, 区划 editable
        this.ssbc0021Disabled = false;
        this.hujiquhuaDisabled = false;
      }
    }
    ,
    checkIdcard() {
      let that = this;
      let ssbc0004 = that.model.ssbc0004;
      ssbc0004 = ssbc0004.toUpperCase();
      that.model.ssbc0004 = ssbc0004;
      if (!IdentityCodeValid(ssbc0004)) {
        that.$Message.error("申请人身份证号码格式不合法!");
        that.model.ssbc0004 = '';
        return false
      }
      that.Loading = true;
      postAction(this.url.check, this.model).then((res) => {
        if (res.data.errcode != 0) {
          that.$Message.error(res.data.errmsg);
          that.model.ssbc0004 = '';
        } else {
          this.changeVisible();
        }
      }).finally(() => {
        that.Loading = false;
      })
    }
    ,
    changeVisible() {
      if (this.model.ssbc0004) {
        var ssbc0004 = this.model.ssbc0004;
        let age = getAgeByIdcardByHD(ssbc0004, new Date());
        if (age <= 18) {
          this.householdRegisterVisible = true;
        } else {
          this.householdRegisterVisible = false;
        }
      }
    }
    ,
    loadImg(response, file, name, id) {
      if (response.errcode == 0) {
        this.$set(this.model, name, response.data);
      } else {
        this.errModal('上传失败！')
      }
      this.Loading = false;
    }
    ,
  }
}
</script>

<style scoped>
.itemStyle {
  width: 200px
}

/deep/ .ivu-form-item-error-tip {
  display: none;
}

/deep/ .ivu-form-item {
  margin-bottom: 10px;
}

.idCard {
  height: 100%;
  padding: 20px;
  background-color: WhiteSmoke;
}

/deep/ .ivu-upload-list {
  display: none;
}

.imgBackColor {
  height: 230px;
  width: 400px;
  cursor: pointer;
}

.imgBackColor img {
  width: 100%;
  height: 100%;
}

.positiveTDiv {
  height: 230px;
  background-color: #7CCD7C;
  color: white;
  font-size: 20px;
  font-weight: 700;
  word-wrap: break-word; /*英文的时候需要加上这句，自动换行*/
  writing-mode: vertical-rl; /*从左向右 从右向左是 writing-mode: vertical-rl;*/
  writing-mode: tb-rl; /*IE浏览器的从左向右 从右向左是 writing-mode: tb-rl；*/
  text-align: center;
  padding: 0px;
  display: flex;
  -webkit-display: flex;
  flex-direction: column;
  justify-content: center;
  letter-spacing: 20px;

}
</style>
